<!--  -->

<template>
  <div class="box">
    <header>
      <div class="title">
        <div class="txt">
          <van-icon name="arrow-left" @click="toHome"/>
          <b @click="toHome" class="b">商品分类</b>
        </div>
      </div>
    </header>
    
    <main>
      <van-tree-select
        height="170vw"
        :items="items"
        :main-active-index.sync="active"
      >
        <template #content>
          <div class="message">
            <span v-if="active === 0" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>每日新品</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>口腔清洁</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>彩妆香氛</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>身体护理</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
            </span>
            <span v-if="active === 1" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>热门推荐</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>口腔清洁</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>彩妆香氛</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>身体护理</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>口腔清洁</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>彩妆香氛</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>身体护理</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
            </span>
            <span v-if="active === 2" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>家用电器</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/a1.jpg" alt="" /></dt>
                <dd>手机</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a2.jpg" alt="" /></dt>
                <dd>平板电脑</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a3.jpg" alt="" /></dt>
                <dd>数码配件</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a4.jpg" alt="" /></dt>
                <dd>小米笔记本</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a1.jpg" alt="" /></dt>
                <dd>手机</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a2.jpg" alt="" /></dt>
                <dd>平板电脑</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a3.jpg" alt="" /></dt>
                <dd>数码配件</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a4.jpg" alt="" /></dt>
                <dd>小米笔记本</dd>
              </dl>
            </span>

            <span v-if="active === 3" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>美妆个护</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>口腔清洁</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>彩妆香氛</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>身体护理</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u1.jpg" alt="" /></dt>
                <dd>口腔清洁</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u2.jpg" alt="" /></dt>
                <dd>彩妆香氛</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u3.jpg" alt="" /></dt>
                <dd>身体护理</dd>
              </dl>
              <dl>
                <dt><img src="../../images/u4.jpg" alt="" /></dt>
                <dd>其他工具</dd>
              </dl>
            </span>

            <span v-if="active === 4" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>3C数码</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/a1.jpg" alt="" /></dt>
                <dd>手机</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a2.jpg" alt="" /></dt>
                <dd>平板电脑</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a3.jpg" alt="" /></dt>
                <dd>数码配件</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a4.jpg" alt="" /></dt>
                <dd>小米笔记本</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a1.jpg" alt="" /></dt>
                <dd>手机</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a2.jpg" alt="" /></dt>
                <dd>平板电脑</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a3.jpg" alt="" /></dt>
                <dd>数码配件</dd>
              </dl>
              <dl>
                <dt><img src="../../images/a4.jpg" alt="" /></dt>
                <dd>小米笔记本</dd>
              </dl>
            </span>
            <span v-if="active === 5" :items="items">
              <van-divider
                :style="{
                  color: '#1989fa',
                  borderColor: '#1989fa',
                  padding: '0 16px',
                }"
              >
                <b>日用文创</b>
              </van-divider>
              <dl>
                <dt><img src="../../images/b1.jpg" alt="" /></dt>
                <dd>日用杂货</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b2.jpg" alt="" /></dt>
                <dd>湿纸纸巾</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b3.jpg" alt="" /></dt>
                <dd>办公文具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b1.jpg" alt="" /></dt>
                <dd>日用杂货</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b1.jpg" alt="" /></dt>
                <dd>日用杂货</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b2.jpg" alt="" /></dt>
                <dd>湿纸纸巾</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b3.jpg" alt="" /></dt>
                <dd>办公文具</dd>
              </dl>
              <dl>
                <dt><img src="../../images/b1.jpg" alt="" /></dt>
                <dd>日用杂货</dd>
              </dl>
            </span>
          </div>
        </template>
      </van-tree-select>
    </main>

    <footer></footer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      active: 0,
      items: [
        { text: "每日新品" },
        { text: "热门推荐" },
        { text: "家用电器" },
        { text: "美妆个护" },
        { text: "3C数码" },
        { text: "日用文创" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toHome: function() {
      this.$router.replace("/layout/home");
    },
    getClass(){
       axios({
      url:'http://1807a.gtxiaoyu.cn/shop/shop/catelist',
      method:'get'
    }) .then(res=>{
       console.log(res)
    })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.getClass()
   
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  overflow-y: hidden;
}
.message {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.message dl {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  img {
    width: 30%;
    margin: 10px 45px;
  }
  dd {
    margin: 0 20px;
  }
}
.title {
  width: 100%;
  height: 7vh;
  border: 1px solid #ccc;
}
.txt {
  align-items: center;
  margin: 15px 20px;
  font-weight: bold;
}
.b{
  margin: 0 15px;
 
}

</style>
